<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增产品规格')"/>
</head>
<body class="white-bg">

<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="form-group">
        <div class="col-sm-6">
            <form class="form-horizontal m" id="form-specification-add">
                <div class="form-group">
                    <label class="col-sm-3 control-label">品名：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="productName" id="productName" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-8">
<!--                        <a class="btn btn-primary single " onclick="openPic()">上传图片</a>-->
                        <!-- 弹窗中的弹窗 -->
                        <button data-toggle="modal" data-target="#myModal">点击上传图片</button>
                    </div>
                </div>
<!--                隐藏的图片id-->
                <input type="hidden" name="imgId" id="imgId">
                <div class="form-group">
                    <label class="col-sm-3 control-label">系列：</label>
                    <div class="col-sm-8">
                        <select name="seriesId" th:with="seriesData=${@productBo.selectSeriesList(null)}">
                            <option value="">必选</option>
                            <option th:each="series : ${seriesData}" th:text="${series.seriesName}"
                                    th:value="${series.seriesId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">风格：</label>
                    <div class="col-sm-8">
                        <select name="styleId" th:with="styleData=${@productBo.selectProStyleList(null)}">
                            <option value="">必选</option>
                            <option th:each="style : ${styleData}" th:text="${style.styleName}"
                                    th:value="${style.styleId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">规格：</label>
                    <div class="col-sm-8">
                        <select name="specificationId"
                                th:with="specificationData=${@productBo.selectProSpecificationList(null)}">
                            <option value="">必选</option>
                            <option th:each="specification : ${specificationData}"
                                    th:text="${specification.specificationName}"
                                    th:value="${specification.specificationId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">材质：</label>
                    <div class="col-sm-8">
                        <select name="qualityId" th:with="qualityData=${@productBo.selectProQualityList(null)}">
                            <option value="">必选</option>
                            <option th:each="quality : ${qualityData}" th:text="${quality.qualityName}"
                                    th:value="${quality.qualityId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">产地：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="productLocation" id="productLocation" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">成本：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="productCost" id="productCost" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">数量：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="productNumber" id="productNumber" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">金额：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="productPrice" id="productPrice" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">进口家具在途：</label>
                    <div class="col-sm-8">
                        <select name="productOnWay">
                            <option value="0">在途</option>
                            <option value="1">仓库</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label ">备注：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="productRemark" id="productRemark" required>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-6">
            <img src="" id="preViewImg">
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 700px;height: 700px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">图库</h4>
            </div>
            <form action="/hcy/product/ProImg/add" id="imgForm" method="post" enctype="multipart/form-data">
                <input type="file" id="inputfile" name="imgFile">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button>提交更改</button>
            </div>
            </form>
            <button type="button" class="btn btn-primary" onclick="fileSub()">提交更改</button>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--这里进行第二层文件上传模态框的提交-->
<script type="text/javascript">
function fileSub() {
    var formData = new FormData($( "#imgForm" )[0]);
    // var form = $("#imgForm").serialize();
    $.ajax({
        url: "/hcy/product/ProImg/add",
        type: "POST",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
                $("#imgId").val(data.imgId);
                $('#myModal').modal('hide');
            console.log(data.imgUrl);
                $("#preViewImg").attr("src",data.imgUrl);
        }
    });
}
</script>

<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "hcy/product/product";

    $("#form-specification-add").validate({
        onkeyup: false,
        rules: {
            productName: {
                remote: {
                    url: ctx + "hcy/product/product/checkProductNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "productName": function () {
                            return $.common.trim($("#productName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
        },
        messages: {
            "productName": {
                remote: "该品名已经存在"
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-specification-add').serialize());
        }
    }
</script>
</body>
</html>